<template>
	<view class="">
		<view class="" v-if="id==1">
			<!-- 页面分享和海报生成按钮 -->
			<anniu :fxinfo="fxinfo"></anniu>
			<!-- 海报生成展示 -->
			<fenxiangs v-if="shareis" :shareInfo="shareInfo"></fenxiangs>
		</view>
		<view class="" v-else>
			<dthaibao v-if="list.length" :list="list" background-color="#FFF" :width="750" :height="1334" @on-success="posterSuccess" ref="poster"></dthaibao>
			<image class="successhb" :src="successImg"></image>
		</view>
	</view>
</template>

<script>
	//分享按钮
	import anniu from '../../components/haibao/anniu.vue';
	//生成普通海报
	import fenxiangs from '../../components/haibao/haibao.vue';
	//生成动态海报
	import dthaibao from '../../components/haibao/dthaibao.vue'
	export default {
		components: {
			anniu,
			fenxiangs,
			dthaibao
		},
		data() {
			return {
				id: 0,
				fxinfo: { //生成普通海报基础信息
					isshow: false,
					waresId: '',
					typeImg: '/r/cms/www/zujianku/haibao/hb-beijing.jpg',
					name: "海上花岛",
					leixing: '景区门票',
					salePrice: 20,
					des: "上海市崇明区竖新镇前卫村801号",
					isshow: true,
					orderType: 1,
					headerImg: "/r/cms/www/zujianku/haibao/hb-touxiang.jpg",
					userName: "Main",
				},
				shareis: false, //海报显示隐藏
				shareInfo: {}, //海报生成需要的信息
				list: [{//生成动态海报信息
					type: 'image',
					path: '/r/cms/www/zujianku/haibao/hb-touxiang.jpg',
					x: 31,
					y: 41,
					width: 110,
					height: 110,
					shape: 'circle'
				}, {
					type: 'text',
					x: 160,
					y: 61,
					text: 'Mian',
					size: 28,
					color: '#999'
				}, {
					type: 'text',
					x: 160,
					y: 105,
					text: '向你推荐了一件好物，请查收',
					size: 28,
					color: '#000'
				}],
				successImg:''
			}
		},
		onLoad(options) {
			this.id = options.id;
			uni.setNavigationBarTitle({
				title: options.name
			})
		},
		onShow() {
			var that = this;
			uni.$on('schb', function(res) { //全局事件接收海报信息
				if (res.json != '') {
					that.shareInfo = res.json;
				}
				that.shareis = res.show
			})
		},
		methods: {
			posterSuccess(e){//生成的动态海报
				this.successImg=e;
			}
		}
	}
</script>

<style>
	.successhb{
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 1334rpx;
	}
</style>
